<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>TWS Javascript Framework - Photo Album Viewer</title>
  <meta name="description" content="TWS Javascript Framework">
  <meta name="author" content="Lee Assam">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <!-- PrettyPhoto -->
  <link href="css/prettyPhoto-min.css" rel="stylesheet" type="text/css" media="screen" />
  <!-- Galleria -->
  <link href="css/galleria/themes/classic/galleria.classic.css" rel="stylesheet" type="text/css" media="screen" />
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

  <div id="container">
    <header>
    <?php include "includes/header.php"?>
    </header>



    <div id="main" role="main">

    <div id="breadcrumbs">
      <a href="index.php">Home</a><span>Photo Album viewer</span>
    </div>

            <h1 >PrettyPhoto - Photo Album Viewer</h1>

            <div class="photoAlbum">
              <a class="firstPic" href="img/photoAlbumViewer/DSCN0163.JPG" rel="pics[pp_gal]"  title="This is the caption for image 1"><img src="img/photoAlbumViewer/DSCN0163.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0171.JPG" rel="pics[pp_gal]" title="This is the caption for image 2"><img src="img/photoAlbumViewer/thumb_DSCN0171.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0173.JPG" rel="pics[pp_gal]" title="This is the caption for image 3"><img src="img/photoAlbumViewer/thumb_DSCN0173.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0174.JPG" rel="pics[pp_gal]" title="This is the caption for image 4"><img src="img/photoAlbumViewer/thumb_DSCN0174.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0175.JPG" rel="pics[pp_gal]" title="This is the caption for image 5"><img src="img/photoAlbumViewer/thumb_DSCN0175.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0176.JPG" rel="pics[pp_gal]" title="This is the caption for image 6"><img src="img/photoAlbumViewer/thumb_DSCN0176.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0177.JPG" rel="pics[pp_gal]" title="This is the caption for image 7"><img src="img/photoAlbumViewer/thumb_DSCN0177.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0178.JPG" rel="pics[pp_gal]" title="This is the caption for image 8"><img src="img/photoAlbumViewer/thumb_DSCN0178.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0179.JPG" rel="pics[pp_gal]" title="This is the caption for image 9"><img src="img/photoAlbumViewer/thumb_DSCN0179.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0180.JPG" rel="pics[pp_gal]" title="This is the caption for image 10"><img src="img/photoAlbumViewer/thumb_DSCN0180.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0181.JPG" rel="showPics[pp_gal]" title="This is the caption for image 11"><img src="img/photoAlbumViewer/thumb_DSCN0181.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>

            <div class="photoAlbum">
              <a class="firstPic" href="img/photoAlbumViewer/DSCN0184.JPG" rel="pics[pp_gal2]"  title="This is the caption for image 1"><img src="img/photoAlbumViewer/DSCN0184.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal2]" title="This is the caption for image 2"><img src="img/photoAlbumViewer/thumb_DSCN0185.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal2]" title="This is the caption for image 3"><img src="img/photoAlbumViewer/thumb_DSCN0186.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal2]" title="This is the caption for image 4"><img src="img/photoAlbumViewer/thumb_DSCN0188.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal2]" title="This is the caption for image 5"><img src="img/photoAlbumViewer/thumb_DSCN0189.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal2]" title="This is the caption for image 6"><img src="img/photoAlbumViewer/thumb_DSCN0191.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal2]" title="This is the caption for image 7"><img src="img/photoAlbumViewer/thumb_DSCN0193.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal2]" title="This is the caption for image 8"><img src="img/photoAlbumViewer/thumb_DSCN0195.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal2]" title="This is the caption for image 9"><img src="img/photoAlbumViewer/thumb_DSCN0196.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal2]" title="This is the caption for image 10"><img src="img/photoAlbumViewer/thumb_DSCN0197.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>

            <div class="photoAlbum">
              <a class="firstPic" href="img/photoAlbumViewer/DSCN0163.JPG" rel="pics[pp_gal3]"  title="This is the caption for image 1"><img src="img/photoAlbumViewer/DSCN0163.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0171.JPG" rel="pics[pp_gal3]" title="This is the caption for image 2"><img src="img/photoAlbumViewer/thumb_DSCN0171.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0173.JPG" rel="pics[pp_gal3]" title="This is the caption for image 3"><img src="img/photoAlbumViewer/thumb_DSCN0173.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0174.JPG" rel="pics[pp_gal3]" title="This is the caption for image 4"><img src="img/photoAlbumViewer/thumb_DSCN0174.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0175.JPG" rel="pics[pp_gal3]" title="This is the caption for image 5"><img src="img/photoAlbumViewer/thumb_DSCN0175.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0176.JPG" rel="pics[pp_gal3]" title="This is the caption for image 6"><img src="img/photoAlbumViewer/thumb_DSCN0176.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0177.JPG" rel="pics[pp_gal3]" title="This is the caption for image 7"><img src="img/photoAlbumViewer/thumb_DSCN0177.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0178.JPG" rel="pics[pp_gal3]" title="This is the caption for image 8"><img src="img/photoAlbumViewer/thumb_DSCN0178.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0179.JPG" rel="pics[pp_gal3]" title="This is the caption for image 9"><img src="img/photoAlbumViewer/thumb_DSCN0179.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0180.JPG" rel="pics[pp_gal3]" title="This is the caption for image 10"><img src="img/photoAlbumViewer/thumb_DSCN0180.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0181.JPG" rel="showPics[pp_gal3]" title="This is the caption for image 11"><img src="img/photoAlbumViewer/thumb_DSCN0181.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>

            <div class="photoAlbum">
              <a class="firstPic" href="img/photoAlbumViewer/DSCN0184.JPG" rel="pics[pp_gal4]"  title="This is the caption for image 1"><img src="img/photoAlbumViewer/DSCN0184.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal4]" title="This is the caption for image 2"><img src="img/photoAlbumViewer/thumb_DSCN0185.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal4]" title="This is the caption for image 3"><img src="img/photoAlbumViewer/thumb_DSCN0186.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal4]" title="This is the caption for image 4"><img src="img/photoAlbumViewer/thumb_DSCN0188.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal4]" title="This is the caption for image 5"><img src="img/photoAlbumViewer/thumb_DSCN0189.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal4]" title="This is the caption for image 6"><img src="img/photoAlbumViewer/thumb_DSCN0191.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal4]" title="This is the caption for image 7"><img src="img/photoAlbumViewer/thumb_DSCN0193.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal4]" title="This is the caption for image 8"><img src="img/photoAlbumViewer/thumb_DSCN0195.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal4]" title="This is the caption for image 9"><img src="img/photoAlbumViewer/thumb_DSCN0196.JPG" alt="Album Title is displayed here"/></a>
              <a href="img/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal4]" title="This is the caption for image 10"><img src="img/photoAlbumViewer/thumb_DSCN0197.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>


            <h1>Galleria - Photo Album Viewer</h1>

            <div id="gallery" >

              <a class="firstPic" href="img/photoAlbumViewer/DSCN0184.JPG" rel="pics[pp_gal4]"  title="This is the caption for image 1"><img src="img/photoAlbumViewer/DSCN0184.JPG"  title="This is the Album Title. This is a test to see if it is extrememly long, how it will be displayed. It might probably get cut off the screen"  alt="This is the caption for image 1. We are going to make it an extremely long caption. It is interesting to see how it will wrap and how it will be displayed. Let us hope that it will be displayed correclty."/></a>
              <a href="img/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal4]" title="This is the caption for image 2"><img src="img/photoAlbumViewer/thumb_DSCN0185.JPG"   title="This is the Album Title"  alt="This is the caption for image 2"/></a>
              <a href="img/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal4]" title="This is the caption for image 3"><img src="img/photoAlbumViewer/thumb_DSCN0186.JPG"   title="This is the Album Title"  alt="This is the caption for image 3"/></a>
              <a href="img/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal4]" title="This is the caption for image 4"><img src="img/photoAlbumViewer/thumb_DSCN0188.JPG"   title="This is the Album Title"  alt="This is the caption for image 4"/></a>
              <a href="img/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal4]" title="This is the caption for image 5"><img src="img/photoAlbumViewer/thumb_DSCN0189.JPG"   title="This is the Album Title"  alt="This is the caption for image 5"/></a>
              <a href="img/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal4]" title="This is the caption for image 6"><img src="img/photoAlbumViewer/thumb_DSCN0191.JPG"   title="This is the Album Title"  alt="This is the caption for image 6"/></a>
              <a href="img/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal4]" title="This is the caption for image 7"><img src="img/photoAlbumViewer/thumb_DSCN0193.JPG"   title="This is the Album Title"  alt="This is the caption for image 7"/></a>
              <a href="img/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal4]" title="This is the caption for image 8"><img src="img/photoAlbumViewer/thumb_DSCN0195.JPG"   title="This is the Album Title"  alt="This is the caption for image 8"/></a>
              <a href="img/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal4]" title="This is the caption for image 9"><img src="img/photoAlbumViewer/thumb_DSCN0196.JPG"   title="This is the Album Title"  alt="This is the caption for image 9"/></a>
              <a href="img/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal4]" title="This is the caption for image 10"><img src="img/photoAlbumViewer/thumb_DSCN0197.JPG"   title="This is the Album Title" alt="This is the caption for image 10"/></a>
              <a href="img/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal4]" title="This is the caption for image 2"><img src="img/photoAlbumViewer/thumb_DSCN0185.JPG"   title="This is the Album Title"  alt="This is the caption for image 2"/></a>
              <a href="img/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal4]" title="This is the caption for image 3"><img src="img/photoAlbumViewer/thumb_DSCN0186.JPG"   title="This is the Album Title"  alt="This is the caption for image 3"/></a>
              <a href="img/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal4]" title="This is the caption for image 4"><img src="img/photoAlbumViewer/thumb_DSCN0188.JPG"   title="This is the Album Title"  alt="This is the caption for image 4"/></a>
              <a href="img/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal4]" title="This is the caption for image 5"><img src="img/photoAlbumViewer/thumb_DSCN0189.JPG"   title="This is the Album Title"  alt="This is the caption for image 5"/></a>
              <a href="img/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal4]" title="This is the caption for image 6"><img src="img/photoAlbumViewer/thumb_DSCN0191.JPG"   title="This is the Album Title"  alt="This is the caption for image 6"/></a>
              <a href="img/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal4]" title="This is the caption for image 7"><img src="img/photoAlbumViewer/thumb_DSCN0193.JPG"   title="This is the Album Title"  alt="This is the caption for image 7"/></a>
              <a href="img/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal4]" title="This is the caption for image 8"><img src="img/photoAlbumViewer/thumb_DSCN0195.JPG"   title="This is the Album Title"  alt="This is the caption for image 8"/></a>
              <a href="img/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal4]" title="This is the caption for image 9"><img src="img/photoAlbumViewer/thumb_DSCN0196.JPG"   title="This is the Album Title"  alt="This is the caption for image 9"/></a>
              <a href="img/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal4]" title="This is the caption for image 10"><img src="img/photoAlbumViewer/thumb_DSCN0197.JPG"   title="This is the Album Title" alt="This is the caption for image 10"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>


            <h1>Stand-Alone Picture Viewer</h1>

            <div class="photoViewer">
              <div class="photo">
                <div class="nav">
                  <a href="#left"><img src="img/photoAlbumViewer/leftArrow.png" alt="Previous" title="Previous" class="leftNav" /></a>
                  <a href="#right"><img src="img/photoAlbumViewer/rightArrow.png" alt="Next" title="Next" class="rightNav" /></a>
                </div>
                <a href="#newpic" title="This is the caption for image 2"><img src="img/photoAlbumViewer/DSCN0185.JPG"   title="This is the Album Title"  alt="This is the caption for image 2" class="currentPhoto"/></a>
              </div>
              <div class="photoViewerMenu">
                <div class="count">1/12</div>
                <div class="baseNav">
                  <a href="#left"><img src="img/photoAlbumViewer/leftArrowSmall.png" alt="Previous" title="Previous" /></a>
                  <a href="#right"><img src="img/photoAlbumViewer/rightArrowSmall.png" alt="Next" title="Next" /></a>
                </div>
                <div class="details">
                  <span class="albumTitle">This is the title for the Album</span>
                  <span class="photoCaption">This is the caption for the image. It can be a short caption or a very descriptive caption that is placed here.</span>
                </div>
                <div class="baseNext"><a href="#right"><img src="img/photoAlbumViewer/rightArrow.png" alt="Next" title="Next" /></a></div>
              </div>
            </div>


    </div>

    <!--Side Section -->
    <aside id="sideContent">
      <div>
        <!-- start slipsum code -->

        <h1>Build Downloads</h1>
        <p>Unminified Version: </p>
        <p>Minified Version: </p>


        <!-- end slipsum code -->
      </div>
    </aside>

    <footer id="footer">
    <?php include "includes/footer.php"?>
    </footer>
  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>

  <!-- Pretty Photo -->
  <script defer src="js/plugins/jquery.prettyPhoto-min.js"></script>
  <!-- Load Galleria Theme -->
  <script type="text/javascript" src="js/plugins/galleria-1.2.3.js"></script>
  <script type="text/javascript" src="css/galleria/themes/classic/galleria.classic.min.js"></script>

  <script>
      $(function(){
        //Pretty Photo
        $("a[rel^='pics']").prettyPhoto({theme: 'dark_rounded', social_tools:false, deeplinking : false});
        //Loading Galleria
        $("#gallery").galleria({
          width: 600,
          height: 640,
          autoplay : 5000,
          _toggleInfo:false,
          lightbox: true,
          dataConfig: function(img) {
            return {
              //description: $(img).next('p').html()
              // description: "This is a test caption for an image",
              // title:"This is a test title --"
            }}
        });
      });
  </script>
  <!-- end scripts-->

	
  <!-- Change UA-XXXXX-X to be your site's ID
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>
 -->

  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->
  
</body>
</html>
